<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed">
    <div class="sidebar-logo">
      <h1>My Angular App</h1>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzTitle="仪表盘" nzIcon="dashboard">
        <ul>
          <li nz-menu-item>分析页</li>
          <li nz-menu-item>监控页</li>
          <li nz-menu-item>工作台</li>
        </ul>
      </li>
      <li nz-submenu nzTitle="表单页" nzIcon="form">
        <ul>
          <li nz-menu-item>基础表单</li>
          <li nz-menu-item>高级表单</li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
          <i nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <div nz-row [nzGutter]="16">
          <div nz-col [nzSpan]="8">
            <div class="grid-content">内容区块 1</div>
          </div>
          <div nz-col [nzSpan]="8">
            <div class="grid-content">内容区块 2</div>
          </div>
          <div nz-col [nzSpan]="8">
            <div class="grid-content">内容区块 3</div>
          </div>
        </div>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>